{% extends 'base.html' %}
{% load static i18n humanize %}
{% load thumbnail %}


{% block head %}
  <link href="{% static 'css/news.css' %}?v=1" rel="stylesheet">
{% endblock head %}


{% block content %}
    <!-- Container -->
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <h1>{% trans 'News' %}</h1>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newsFormModal">
            <i class="fa fa-share-alt" aria-hidden="true"></i> {% trans 'Share something' %}
          </button>
        </div>
        <div class="col-md-6">
          <div>
            <h3>{% trans 'Most Recent Posts' %}</h3>
          </div>

          <!-- Modals -->
          {% include 'news/news_form_modal.html' %}
          {% include 'news/news_thread_modal.html' %}
          <!-- End Modals -->

          <!-- News List -->
          <div class="stream-update">
            <a href="{% url 'news:list' %}"><span class="new-posts"></span> {% trans 'There are new posts' %}</a>
          </div>
          <div class="infinite-container">
            <ul class="stream">
              {% for news in news_list %}
                {% include 'news/news_single.html' with news=news %}
              {% endfor %}
            </ul>
          </div>
          <div class="load">
            {% if page_obj.has_next %}
              <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}"><img src="{% static 'img/loading.gif' %}"></a>
            {% endif %}
          </div>
          <!-- End News List -->
        </div>
      </div>
    </div>
    <!-- End container -->

{% endblock content %}

{% block modal %}
  <script src="{% static 'js/jquery.waypoints.min.js' %}" type="text/javascript"></script>
  <script src="{% static 'js/infinite.min.js' %}" type="text/javascript"></script>
  <script src="{% static 'js/news.js' %}" type="text/javascript"></script>
  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.load').show();
      },
      onAfterPageLoad: function ($items) {
        $('.load').hide();
      }
    });
  </script>
{% endblock modal %}
